<!DOCTYPE html>
<html>

<head>

    <style>
        body {
            height: 100vh;
            width: 100vw;
            background: red;
        }

        @media screen and (max-width: 1200px) {
            body {
                background: yellow;
            }
        }
        @media screen and (max-width: 900px) {
            body {
                background: green;
            }
        }
        @media screen and (max-width: 780px) {
            body {
                background: blue;
            }
        }
        @media screen and (max-width: 600px) {
            body {
                background: purple;
            }
        }
        @media screen and (max-width: 480px) {
            body {
                background: palevioletred;
            }
        }
    </style>
</head>

<body>
    <div>测试</div>
</body>

</html>